import Vue from "vue";
import Router from "vue-router";

// 在vue实例上挂载插件
// Vue.use如果接收的是一个对象，会自动查找对象中的install方法 并执行
// Vue.use如果接收一个方法 会将这个方法当做install方法立即执行
Vue.use(Router);

/* Layout */
import Layout from "@/layout";

export const constantRoutes = [
  // 登录页面
  {
    path: "/login",
    component: () => import("@/views/Login/index"),
    hidden: true,
  },
  // 404 页面
  {
    path: "/404",
    component: () => import("@/views/404"),
    hidden: true,
  },
  // 首页
  {
    path: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        name: "Dashboard",
        // 路由懒加载 当页面访问到对应的路由时，才会加载对应页面组件
        // 减小首页包的体积 缩短了首屏加载时间
        component: () => import("@/views/Dashboard/index"),
        // 路由元数据 定义了路由的名字，路由的图标
        meta: { title: "首页", icon: "dashboard" },
      },
    ],
  },
  // 工资管理页面
  {
    path: "/salarys",
    component: Layout,
    children: [
      {
        path: "", // 如果children path置空的话 当前这个路由会作为一级渲染的默认路由
        name: "salarys",
        component: () => import("@/views/Salary"),
        meta: { title: "工资管理", icon: "skill" },
      },
    ],
  },
];

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    // history 模式和hash的区别 ：
    // hash模式的url默认带一个#
    // hash模式路由变更监听的是hashChange事件
    // history模式路由变更监听的location.herf的改变
    // history模式触发的方法是pushState 和popState 并且不会自动触发
    // history是html5新推出的api 兼容性不如hash好
    mode: "history",
    // 只在浏览器支持的pushState的情况下生效
    // 在返回值中配置滚动条的位置 y ： 0
    scrollBehavior: () => ({ y: 0 }),
    // 将定义好的路由数据 添加到路由实例中
    routes: constantRoutes,
  });

const router = createRouter();

// reset 路由方法
export function resetRouter() {
  // 得到一个全新的 router 实例对象
  const newRouter = createRouter();
  // 使用新的路由记录覆盖掉老的路由记录
  router.matcher = newRouter.matcher; // reset router
}

export default router;
